<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="5">
					<a-form-item label="招聘城市" name="city">
						<a-select
							v-model:value="searchFormState.city"
							placeholder="请选择招聘城市"
							:options="branchCityOptions"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="职位名称" name="name">
						<a-input v-model:value="searchFormState.name" placeholder="请输入职位名称" />
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="职位编码" name="code">
						<a-input v-model:value="searchFormState.code" placeholder="请输入职位编码" />
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="职位状态" name="status">
						<a-select
							v-model:value="searchFormState.status"
							placeholder="请选择职位状态"
							:options="commonStatusOptions"
							allowClear
						/>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
		<s-table ref="tableRef" :columns="columns" :data="loadData" bordered rowKey="id">
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()">
						<template #icon>
							<plus-outlined />
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a-button type="link" @click="formRef.onOpen(record)">编辑</a-button>
						<a-button
							:type="record.status === 'ENABLE' ? 'link' : 'link'"
							:danger="record.status === 'ENABLE'"
							@click="handleChangeStatus(record)"
							:class="record.status === 'ENABLE' ? 'status-disable-btn' : 'status-enable-btn'"
						>
							{{ record.status === 'ENABLE' ? '停用' : '启用' }}
						</a-button>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<Form ref="formRef" @successful="handleFormSuccess" />
</template>

<script setup name="RecruitmentPositions">
	import { ref } from 'vue'
	import recruitmentPositionApi from '@/api/hrms/recruitment/positions/recruitmentPositionsApi'
	import tool from '@/utils/tool'
	import Form from './form.vue'
	import { message } from 'ant-design-vue'

	const searchFormState = ref({
		current: 1,
		size: 10,
		city: undefined,
		name: undefined,
		code: undefined,
		status: undefined
	})

	const tableRef = ref()
	const searchFormRef = ref()
	const formRef = ref()
	const branchCityOptions = tool.dictList('BRANCH_CITY')
	const commonStatusOptions = tool.dictList('COMMON_STATUS')
	const columns = [
		{ title: '招聘城市', dataIndex: 'cityName' },
		{ title: '职位名称', dataIndex: 'name' },
		{ title: '职位编码', dataIndex: 'code' },
		{ title: '职位状态', dataIndex: 'statusName' },
		{ title: '操作', dataIndex: 'action', align: 'center', width: 200 }
	]

	// 加载数据
	const loadData = async (params) => {
		return await recruitmentPositionApi.pageList(searchFormState.value)
	}

	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}

	// 表单操作成功后的回调
	const handleFormSuccess = () => {
		tableRef.value.refresh(true)
	}

	// 修改状态（启用/停用）
	const handleChangeStatus = async (record) => {
		try {
			const newStatus = record.status === 'ENABLE' ? 'DISABLED' : 'ENABLE'
			const statusText = newStatus === 'ENABLE' ? '启用' : '停用'

			// 调用edit接口，只传递id和status字段
			await recruitmentPositionApi.edit({
				id: record.id,
				status: newStatus
			})

			message.success(`${statusText}成功`)
			tableRef.value.refresh(true)
		} catch (error) {
			console.error('状态修改失败:', error)
			const statusText = record.status === 'ENABLE' ? '停用' : '启用'
			message.error(`${statusText}失败: ${error.message || ''}`)
		}
	}
</script>

<style scoped>
	.status-enable-btn {
		color: #52c41a !important; /* 绿色 */
	}

	.status-disable-btn {
		color: #ff4d4f !important; /* 红色 */
	}
</style>
